<script setup lang="ts">
import { reactive, ref, computed, defineEmits} from "vue";
const emit = defineEmits(['getUpdateRead'])
const props = defineProps({
  cardItem: {
    type: Object,
    default: () => { }
  },
  navFlag: {
    type: Number,
    default: 0
  },
  title: {
    type: String,
    default: ''
  }
})
const goDetail = (cardItem:any) => {
  uni.navigateTo({
    url: `/pagesMerchand/stone-details?id=${cardItem.sourceId}`
    // url: `/pagesMerchand/stone-details`
  })
  emit('getUpdateRead', cardItem.id)
}
</script>

<template>
  <view class="card-box">
    <view class="circle-box" v-if="cardItem.state==0"></view>
    <view class="leave-wrap">
      <view class="leave-avatar">
        <uv-avatar :src="cardItem.appUserImage" shape="circle"></uv-avatar>
      </view>
      <view class="leave-info">
        <view class="name">{{cardItem.appUserName}}</view>
        <view class="times">{{cardItem.createTime}}</view>
      </view>
    </view>
    <view class="leave-content">
      <text>{{cardItem.content}}</text>
      <text class="hf" @tap="goDetail(cardItem)">详情</text>
    </view>
    <!-- <view class="circle-box" v-if="cardItem.state==0"></view>
    <view class="title-box">
      <view class="title-text">{{ cardItem.title }}</view>
      <view class="yd" v-if="cardItem.state==0">未读</view>
      <view class="yd" v-if="cardItem.state==1">已读</view>
    </view>
    <view class="content-box">{{ cardItem.content }}</view>
    <uv-line :customStyle="{ margin: '28rpx 0' }"></uv-line>
    <view class="time-box">
      <view>
        {{ cardItem.createTime }}
      </view>
      <view>
        <uv-icon name="arrow-right" color="#A5A5A7" size="20"></uv-icon>
      </view>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
.leave-wrap{
  display: flex;
  align-items: center;
}
.leave-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 32rpx;
  margin-top: 16rpx;
  .hf{
    font-size: 24rpx;
    color: #B8B8B8;
  }
}
.leave-info{
  margin-left: 14rpx;
  .name{
    font-weight: 600;
    font-size: 28rpx;
  }
  .times{
    font-size: 24rpx;
  }
}
.card-box {
  position: relative;
  margin: 24rpx 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 30rpx;
  .circle-box {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    width: 20rpx;
    height: 20rpx;
    background-color: rgba(243, 96, 78, 1);
    box-shadow: 2rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
    border: 0rpx solid rgba(187, 187, 187, 1);
    border-radius: 50%;
  }

  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title-text {
      color: rgba(16, 16, 16, 1);
      font-size: 32rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
    }
    .yd{
      font-weight: 400;
      font-size: 24rpx;
      color: #B8B8B8;
    }
    image {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .content-box {
    margin-bottom: 20rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
  }

  .time-box {
    color: rgba(190, 190, 190, 1);
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    image {
      width: 36rpx;
      height: 36rpx;
    }
  }
}
</style>
